<template>
	<view class="container">
		<view class="suggestion" v-if="suggestion_flag">
			<text v-for="(items,index) in suggestion" @click="suggestion_click(items.kw)">{{items.kw}}</text>
		</view>
		<view class="search" v-for="(items,index) in search.ad" v-if="hidden_hot">
			<view class="search-desc-items" v-for="(aditems,adindex) in items.list" @click="navToRuter(aditems.route)">
				<image :src="aditems.path" mode="widthFix" lazy-load></image>
			</view>
		</view>
		<view class="search-title" v-if="!hidden_hot">
			<view class="goods-search-bar">
				<view class="goods-search-menu" @click="get_goods_new()">
					综合推荐
				</view>
				<view class="goods-search-menu" @click="get_goods_sale()">
					销量
					<view class="goods-search-image" v-if="sale_status == 0">
						<image src="../../static/buytao/up_n.png" mode="widthFix" lazy-load></image>
						<image src="../../static/buytao/down_n.png" mode="widthFix" lazy-load></image>
					</view>
					<view class="goods-search-image" v-if="sale_status == 1">
						<image src="../../static/buytao/up.png" mode="widthFix" lazy-load></image>
						<image src="../../static/buytao/down_n.png" mode="widthFix" lazy-load></image>
					</view>
					<view class="goods-search-image" v-if="sale_status == 2">
						<image src="../../static/buytao/up_n.png" mode="widthFix" lazy-load></image>
						<image src="../../static/buytao/down.png" mode="widthFix" lazy-load></image>
					</view>
					
				</view>
				<view class="goods-search-menu" @click="get_goods_price()">
					价格
					<view class="goods-search-image" v-if="price_status == 0">
						<image src="../../static/buytao/up_n.png" mode="widthFix" lazy-load></image>
						<image src="../../static/buytao/down_n.png" mode="widthFix" lazy-load></image>
					</view>
					
					<view class="goods-search-image" v-if="price_status == 1">
						<image src="../../static/buytao/up.png" mode="widthFix" lazy-load></image>
						<image src="../../static/buytao/down_n.png" mode="widthFix" lazy-load></image>
					</view>
					
					<view class="goods-search-image" v-if="price_status == 2">
						<image src="../../static/buytao/up_n.png" mode="widthFix" lazy-load></image>
						<image src="../../static/buytao/down.png" mode="widthFix" lazy-load></image>
					</view>
				</view>
				<view class="goods-search-menu" @click="get_goods_commission()">
					佣金
					<view class="goods-search-image" v-if="commission_status == 0">
						<image src="../../static/buytao/up_n.png" mode="widthFix" lazy-load></image>
						<image src="../../static/buytao/down_n.png" mode="widthFix" lazy-load></image>
					</view>
					<view class="goods-search-image" v-if="commission_status == 1">
						<image src="../../static/buytao/up.png" mode="widthFix" lazy-load></image>
						<image src="../../static/buytao/down_n.png" mode="widthFix" lazy-load></image>
					</view>
					<view class="goods-search-image" v-if="commission_status == 2">
						<image src="../../static/buytao/up_n.png" mode="widthFix" lazy-load></image>
						<image src="../../static/buytao/down.png" mode="widthFix" lazy-load></image>
					</view>
				</view>
			</view>
			
			
			<!-- 将导航栏数据放入navData中,默认为{[name: 'XXX']}，可到componets/Nav.vue中修改 -->
			<goodsNav :navData="navData" @changeTab='changeTab' :changeNavIndex="current"></goodsNav>
			<!-- 列表 -->
			<view class="uni-tab-bar">
				<swiper class="swiper-box" :autoplay="false" :duration="200" @change="changeSwiper" :style="{height:swiperheight+'px'}" :current="tabIndex">
					<swiper-item v-for="(items, index) in navData">
						<goodsList :dataList="dataList" :index="current"></goodsList>
						<uni-load-more :status="more"></uni-load-more>
					</swiper-item>
				</swiper>
			</view>
		</view>
		
		
		<view class="goods-hot" v-if="hidden_hot">
			<view class="goods-hot-title">热搜版</view>
			<text v-for="(items,index) in hot_key" @click="hotkeywordsearch(items.keyword)">{{items.keyword}}</text>
		</view>
		
		
	</view>
</template>

<script>
	import goodsNav from '../../components/goods/goods-nav'
	import goodsList from '../../components/goods/goods-list'
	import collegeapi from '../../common/api/college'
	import apiindex from '../../common/api/index'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more'
	export default {
		
		//头部搜索按钮
		onNavigationBarButtonTap(val) {
			this.suggestion_flag=false
			this.goods_search()
		},
		//头部输入框
		onNavigationBarSearchInputChanged(val) {
			if(val.text != ''){
				this.search_params.keyword=val.text
				this.suggestion_params.keyWords=val.text
				this.search_suggestion()
			}else{
				this.suggestion_flag=false
			}
		},
		
		//监听原生标题栏搜索输入框输入内容变化事件
		onNavigationBarSearchInputConfirmed(val){
			this.goods_search()
		},
		
		data() {
			return {
				more:'loading',
				swiperheight:150,//屏幕高度
				current: 0,
				refreshering: true,
				tabIndex:0,//tab索引
				// 导航栏数据
				navData: [
					{name:'淘宝'},
					{name:'京东'},
					{name:'拼多多'},
					{name:'唯品会'},
				],
				// 分类数据
				dataList:[],
				
				search:{
					ad:[],
				},
				hot_key:[],
				suggestion:[],
				suggestion_flag:false,
				suggestion_params:{
					keyWords:'',
					type:1,
				},
				
				hidden_hot:true,
				
				search_params:{
					site:'haodanku',
					page:1,
					keyword:'',
					cid:'',
					order_by:'',
					sort:'',
				},
				
				sale_status:0,
				price_status:0,
				commission_status:0,				
			};
		},
		created(){
			this.jp()
			this.home_hot_key()
		},
		
		//接收参数值
        onLoad(options){
			if(options.site != undefined){
				this.search_params.site=options.site
			}else{
				this.search_params.site='haodanku'
			}
			if(options.keyword != undefined){
				// #ifdef APP-PLUS  
				//设置原生导航栏的值
				let webView = this.$mp.page.$getAppWebview()
				webView.setTitleNViewSearchInputText(options.keyword)
				// #endif
				this.search_params.keyword=options.keyword
				this.suggestion_flag=false
				this.hidden_hot=false
				this.goods_search()
			}
        },
		components:{
			goodsNav,
			goodsList,
			collegeapi,
			apiindex,
			uniLoadMore
		},
		//上拉加载更多
		onReachBottom:function() {
			this.goods_more_search()
		},
		methods:{
			/**
			 * 最新排序
			 */
			get_goods_new(){
				this.sale_status=0
				this.price_status=0
				this.commission_status=0
				this.search_params.order_by=''
				this.search_params.sort=''
				this.goods_search()
			},
			
			
			/**
			 * 排序销量
			 */
			get_goods_sale(){
				this.price_status=0
				this.commission_status=0
				if(this.sale_status == 0){
					this.sale_status =1
				}else{
					if(this.sale_status == 1){
						this.sale_status=2
						this.search_params.sort='desc'
					}else{
						this.sale_status=1
						this.search_params.sort='asc'
					}
				}
				this.search_params.order_by='sale'
				this.goods_search()
			},
			
			/**
			 * 排序价格
			 */
			get_goods_price(){
				this.commission_status=0
				this.sale_status=0
				if(this.price_status == 0){
					this.price_status =1
				}else{
					if(this.price_status == 1){
						this.price_status=2
						this.search_params.sort='desc'
					}else{
						this.price_status=1
						this.search_params.sort='asc'
					}
				}
				this.search_params.order_by='price'
				this.goods_search()
			},
			
			/**
			 * 排序佣金
			 */
			get_goods_commission(){
				this.price_status=0
				this.sale_status=0
				if(this.commission_status == 1){
					this.commission_status=2
					this.search_params.sort='desc'
				}else{
					this.commission_status=1
					this.search_params.sort='asc'
				}
				this.search_params.order_by='commission'
				this.goods_search()
			},
			
			
			//通用广告
			jp(){
				collegeapi.homejd({type:'search'}).then(res =>{
					this.search.ad=res.data.ad
				}).catch(res =>{
					
				});
			},
			
			//热搜关键字
			home_hot_key(){
				apiindex.home_hot_key({}).then(res =>{
					this.hot_key = res.data
				}).catch(res =>{
					
				});
			},
			
			//联想关键词
			search_suggestion(){
				apiindex.search_suggestion(this.suggestion_params).then(res =>{
					this.suggestion=res.data
					if(this.suggestion.length>0){
						this.suggestion_flag=true
					}else{
						this.suggestion_flag=false
					}
				}).catch(res =>{
					this.suggestion_flag=false
				});
			},
			
			//联想关键词搜索
			suggestion_click(kw){
				// #ifdef APP-PLUS  
				//设置原生导航栏的值
				let webView = this.$mp.page.$getAppWebview()
				webView.setTitleNViewSearchInputText(kw)
				// #endif
				
				this.search_params.keyword=kw
				this.suggestion_flag=false
				this.goods_search()
			},
			
			//商品搜索
			goods_search(){
				apiindex.goods_search(this.search_params).then(res =>{
					this.hidden_hot=false	//隐藏热搜
					this.suggestion_flag=false	//隐藏联想
					if(res.data.length>0){
						this.more='loading'
						this.dataList=res.data
						this.swiperheight = (res.data.length) * 150+50;
					}else{
						this.swiperheight = 150;
						this.dataList=[]
						this.more='noMore'
					}
				}).catch(res =>{
					this.suggestion_flag=false
				});
			},
			
			//上拉加载更多
			goods_more_search(){
				this.search_params.page=this.search_params.page+1
				apiindex.goods_search(this.search_params).then(res =>{
					//获取数据
					if(res.data.length>0){
						this.more='loading'
						// for(var i=0;i<res.data.length;i++){
						// 	this.dataList.push(res.data[i]);
						// }
						this.dataList = this.dataList.concat(res.data);//合并数组
						let current_height = (res.data.length) * 150
						this.swiperheight = this.swiperheight+current_height
					}else{
						this.more='noMore'
					}
				}).catch(res =>{
					this.suggestion_flag=false
				})					
			},
			
			
			//热搜关键字查找
			hotkeywordsearch(keywords){
				// #ifdef APP-PLUS  
				//设置原生导航栏的值
				let webView = this.$mp.page.$getAppWebview()
				webView.setTitleNViewSearchInputText(keywords)
				// #endif
				
				this.hidden_hot=false
				this.search_params.keyword=keywords
				this.goods_search()
			},
			
			// 选择导航栏事件
			changeTab(index){
				console.log('选择')
				this.tabIndex = index
				this.search_params.page=1
				this.swiperheight=150
				switch(index){
					case 0:
						this.search_params.site='haodanku'
						this.goods_search()
						break;
					case 1:
						this.search_params.site='jd'
						this.goods_search()
						break;
					case 2:
						this.search_params.site='pdd'
						this.goods_search()
						break;
					case 3:
						this.search_params.site='vph'
						this.goods_search()
						break;
				}
			},
			//滑动切换
			tabChange(e){
				this.current = e.detail.current;
			},
			// 滑动内容页事件
			changeSwiper(e) {
				this.current = e.detail.current
				this.$emit('changeNavIndex', e.detail.current)
			},			
			
			//路由跳转
			navToRuter(router){
				console.log(router)
			},
			
		},
	}
</script>

<style lang='scss'>
	/*商品搜索栏目*/
	.goods-search-bar{
		width:100%;
		display: flex;
		flex-direction:row;
		flex-wrap:wrap;
		white-space:nowrap;	
	}
	.goods-search-menu{
		width: 25%;	
		display: block;
		text-align:center;
		line-height:40px;
	}
	.goods-search-menu>text{
		display: block;
	}
	.goods-search-image{
		width:40upx;
		height:40upx;
		display:inline-block;
		position:relative;
	}
	.goods-search-image>image{
		margin-left:10upx;
		margin-top:3upx;
		display:block;
		width:15upx;
	}
	/**搜索结束**/
	
	
	.search{
		width:100%;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		justify-content:left;
		flex-wrap:wrap;
		border-radius:20upx;
	}
	.search-desc-items{
		width:100%;
		flex:1;
	}
	.search-desc-items>image{
		width:100%;
	}
	.goods-hot{
		width:100%;
	}
	.goods-hot-title{
		width:96%;
		margin:0 auto;
		padding:20upx;
		color:#CCCCCC;
	}
	.goods-hot>text{
		padding:10upx 20upx;
		background-color: #FFD9D9;
		color:#F50E34;
		margin-right:20upx;
		border-radius:20upx;
		display: inline-block;
		margin-bottom:20upx;
	}
	.suggestion{
		width:100%;
		position:fixed;
		z-index:1;
		background-color: #FFFFFF;
	}
	.suggestion>text{
		display:block;
		height:60upx;
		line-height:60upx;
		padding-left:60upx;
		border-bottom:1px solid #CCCCCC;
	}
	.suggestion>text:last-child{
		border: none;
	}
</style>
